<template>
  <div class="breadcrumb-nav">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item @click.prevent="navigateTo('')">
        <div class="breadcrumb-item">
          <FileTypeIcon fileType="directory" size="small" />
          <span>根目录</span>
        </div>
      </el-breadcrumb-item>
      <template v-for="(part, index) in breadcrumbParts" :key="index">
        <el-breadcrumb-item @click.prevent="navigateTo(part.path)">
          <div class="breadcrumb-item">
            <FileTypeIcon fileType="directory" size="small" />
            <span>{{ part.name }}</span>
          </div>
        </el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useFilePreviewStore } from '../../store';
import FileTypeIcon from '../common/FileTypeIcon.vue';

defineProps({
  currentPath: {
    type: String,
    default: ''
  },
  breadcrumbParts: {
    type: Array,
    default: () => []
  }
});

const router = useRouter();
const filePreviewStore = useFilePreviewStore();

// 使用Pinia store导航到指定路径
const navigateTo = async (path) => {
  console.log('面包屑导航到:', path);
  
  try {
    // 先清空文件列表，避免动画闪烁
    filePreviewStore.clearFiles();
    
    // 使用store导航
    await filePreviewStore.navigateTo(path);
    
    // 然后更新URL
    if (path === '') {
      // 根目录特殊处理
      await router.push({
        name: 'Preview',
        query: { tab: 'files' }
      });
    } else {
      await router.push({
        name: 'FileBrowser',
        params: { path }
      });
    }
    
    console.log('导航完成, 当前路径:', path);
  } catch (err) {
    if (err.name !== 'NavigationDuplicated') {
      console.error('导航错误:', err);
    }
  }
};
</script>

<style scoped>
.breadcrumb-nav {
  margin-bottom: 8px;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* 增加可点击的视觉反馈 */
:deep(.el-breadcrumb__item) {
  cursor: pointer;
}

:deep(.el-breadcrumb__inner) {
  color: var(--el-color-primary);
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: var(--el-text-color-regular);
}

:deep(a) {
  text-decoration: none;
  color: inherit;
}
</style> 